<template>
	<div>
		<el-form ref="baseform" :model="form" :rules="rules" label-position="left" label-width="120px">
			<el-form-item prop="newPassword" label="新登录密码">
				<el-input type="password" v-model="form.newPassword" style="width: 180px" />&nbsp;如不更改密码，请留空
			</el-form-item>
			<el-form-item prop="verifyPassword" label="重复登陆密码">
				<el-input type="password" v-model="form.verifyPassword" style="width: 180px" />
			</el-form-item>
			<el-form-item prop="oldPassword" label="现有密码">
				<el-input type="password" v-model="form.oldPassword" style="width: 180px" />&nbsp;如要更改密码，要输入现有密码
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup name="userInfo">
import { updatePwd } from '@/api/index/index'
import { reactive } from 'vue'
const { proxy } = getCurrentInstance()
const form = reactive({
	oldPassword: '',
	newPassword: '',
	verifyPassword: ''
})
const validate = (rule, value, callback) => {
	if (!value) {
		callback(new Error('密码不能为空'))
	} else {
		if (value.length < 6 || value.length > 20) {
			callback(new Error('密码长度在6-20字之间'))
		} else {
			if (form.newPassword !=''&&form.verifyPassword !=''&&form.newPassword != form.verifyPassword) {
				callback(new Error('两次密码不一致！'))
			} else {
				callback()
			}
		}
	}
}
const rules = {
	oldPassword: [{ required: true, message: '原密码不能为空', trigger: 'blur' }],
	newPassword: [
		{ required: true, message: '新密码不能为空', trigger: 'blur' },
		{ validator: validate, trigger: 'blur' }
	],
	verifyPassword: [
		{ required: true, message: '校验密码不能为空', trigger: 'blur' },
		{ validator: validate, trigger: 'blur' }
	]
}
const baseform = ref()
const onSubmit = () => {
	baseform.value.validate((valid, e) => {
		if (valid) {
			updatePwd(form).then((res) => {
				proxy.$modal.msgSuccess('修改成功！')
				form['oldPassword'] = ''
				form['newPassword'] = ''
				form['verifyPassword'] = ''
			})
		}
	})
}
</script>

<style></style>
